<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<head th:replace="fragments/common :: common-header"></head>

<body class="bg-dark">

  <div class="container">
    <div class="card card-login mx-auto mt-5">
      <div class="card-header">Sign in</div>
          <div class="card-body">
            <div class="alert alert-danger"
                 th:if="${param.error}">Invalid username and password.</div>
            <div class="alert alert-danger"
                 th:if="${param.logout}">You have been logged out.</div>
            <form th:action="@{/login}" method="post">
              <div class="form-group">
                <label for="inputUsername">Your username:</label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fa fa-user fa-fw"></i></span>
                  </div>
                  <input name="username"
                         id="inputUsername"
                         class="form-control"
                         placeholder="Username"
                         type="text"
                         required="required"
                         autofocus="autofocus">
                </div>
              </div>
              <div class="form-group">
                <label for="inputPassword">Your password:</label>
                <div class="input-group">
                  <div class="input-group-prepend">
                    <span class="input-group-text"><i class="fa fa-lock fa-fw"></i></span>
                  </div>
                  <input name="password"
                         id="inputPassword"
                         class="form-control"
                         placeholder="******"
                         type="password"
                         required="required">
                </div>
              </div>
              <div class="checkbox">
                <label for="remember-me">
                  <input type="checkbox"
                         name="remember-me"
                         id="remember-me"
                         value="true">
                  Remember password
                </label>
              </div>
              <div class="form-group">
                <input type="submit"
                       class="btn btn-primary btn-block"
                       name="login-submit"
                       id="login-submit"
                  value="Sign in" />
              </div>
            </form>
      </div>
    </div>
  </div>

<!-- Bootstrap core JavaScript-->
<script th:src="@{/webjars/jquery/3.4.1/jquery.min.js}"></script>
<script th:src="@{/webjars/bootstrap/4.3.1/js/bootstrap.min.js}"></script>

</body>

</html>